<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>窗口导航</title>
		<style>
			body {
				margin: 0;
				overflow: hidden;
				font-family: "microsoft yahei";
				/* background-color: red; */
				-webkit-app-region: drag;
			}

			.jump{
				float: right;
				-webkit-app-region: drag;
				/* background: #FFF; */
				background: rgba(255,255,255,1);
				border-radius: 45px;
				box-shadow: 3px 5px 5px #1890ff;  
				right: 6px;
				position: absolute;
			}
			.jump a img{
			    padding:1px;
			    /* background:rgba(255,255,255,0.6);           */
			    /* box-shadow:0 0 10px rgba(0,0,0,0.3); */
			    /* 设置图片跳动动画 */
			    animation: jump 1.5s ease infinite;
				-webkit-app-region: drag;
				
			}
			@keyframes jump{
			    0%{ transform:translateY(0) scale(1,1);}
			    /* 中间状态图片位移并且拉伸 */
			    50%{transform:translateY(0) scale(0.95,0.95);}
			    100%{transform:translateY(0) scale(1,1);}
			}
			.jump a:after{
			    content:"";
			    position: absolute;
			    width: 100%;
			    height:100px;
			    left: 0; bottom:-100px;
			    z-index: -1;
			    /* background:rgba(0,0,0,0.7); */
			    filter:blur(10px);
			    border-radius:50%;
			}
			@-webkit-keyframes twinkling{
			  0% {
			      opacity: 0; 
			  }
			  10% {
			      opacity: 1; 
			  }
			}
			 
			.demo001 {
			    -webkit-animation: twinkling 2s infinite ease-in-out; 
			}
		</style>
		<script>
			
			const { ipcRenderer } = require('electron');
			// const isDev = require('electron-is-dev');
			// const fs = require('fs');
			// const ini = require('ini');
			const node_Conf = require('conf');
			const node_config = new node_Conf();
			
			const __catalog = "client_pc";
			let appConfig = {
				"logo":"",
				"showSuspensionNav":1,  //0 自动显示隐藏 1 一直显示
				"navbtns":"drag,desktop,first,main",
				"goToDeskTopConfirm":0
			};

			
			try {
								
				//覆盖默认配置
				var config = node_config.get("appConfig");
				for (const key in config) {
					appConfig[key] = config[key];
				}
				//alert(appConfig["navbtns"])
				
			} catch (error) {
				console.error(error);
				//alert(error)
			}
			var __goToDeskTop = 0;
			function opNavWindow(){
				//推送事件到主窗口,主窗口判断当前导航窗口是否显示, 显示则关闭,关闭则显示
				var page = "suspension_9gg.h.html";
				page = "suspension.html";
				ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":page},"type":"opNavWindow"});
				__goToDeskTop = 0;
			}

			function goToFirst(){
				//跳转到第一屏
				ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToFirst"});
				// setAutoPlay();
				__goToDeskTop = 0;
				try {
					document.getElementById("nav_pause_img").src="../assets/images/nav_pause.png";
				} catch (error) {
					
				}
			}
			function goToPrev(){
				//跳转到 上一屏
				__goToDeskTop = 0;
				ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToPrev"});
			}
			function goToNext(){
				//跳转到 下一屏
				ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToNext"});
			}

			function setStop(){
				
				ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToPause"});
				try {
					document.getElementById("nav_pause_img").src="../assets/images/nav_play.png";
				} catch (error) {
					
				}
				
			}

			function setAutoPlay(){
				__goToDeskTop = 0;
				ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToAutoPlay"});
				try {
					document.getElementById("nav_pause_img").src="../assets/images/nav_pause.png";
				} catch (error) {
					
				}
				
			}

			function goToPause(){
				//暂停，手动切换
				//图标切换，当前为暂停 
				//
			
				var s = document.getElementById("nav_pause_img").src;
				if(s.indexOf("pause")>=0){
					//当前为自动播放状态，图标为暂停图标
					setStop();
				}else if(s.indexOf("play")>=0){
					//当前为暂停状态（手动切换画面），图标为播放图标
					setAutoPlay();
				}
				
				
				
			}

			function goToSetting(){
				setStop();//停止播放
				//显示设置页面
				ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToSetting"});
				__goToDeskTop = 1;
			}
			function goToDeskTop(){
				// console.log(1234,appConfig);
				setStop();
				// 	//提示是否要退出
				if(1==appConfig.goToDeskTopConfirm && __goToDeskTop==0)
				{
					
					var result= confirm('确定要回到桌面吗？');
					if(false == result){
						setAutoPlay();
					}else{
						//回到系统桌面，停止轮播 goToDeskTop
						ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToDeskTop"});
						__goToDeskTop = 1;
					}
				}
				else if(1==appConfig.goToDeskTopConfirm && __goToDeskTop==1)
				{
					//不提示，直接回到系统桌面，停止轮播 goToDeskTop
					ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToDeskTop"});
					__goToDeskTop = 1;
				}
				else if(0==appConfig.goToDeskTopConfirm)
				{
					//不提示，直接回到系统桌面，停止轮播 goToDeskTop
					ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToDeskTop"});
					__goToDeskTop = 1;
				}else{
					//不提示，直接回到系统桌面，停止轮播 goToDeskTop
					ipcRenderer.send('app-suspensionWindowEvent', {"options":{"page":""},"type":"goToDeskTop"});
					__goToDeskTop = 1;
				}
				
			}
		</script>
	</head>
	<body>
		<div style="float: right;-webkit-app-region: drag;" class="jump"  id="op_btn" >
			<a  id="nav_drag" >
				<img id="" src="../assets/images/nav_drag.png"  width="60px" />
			</a>
			<a title="切换到设置主页" href="javascript:goToSetting(this)" class="nav_close" id="nav_setting"  style="-webkit-app-region: drag;"><img id=""  src="../assets/images/nav_1.png" width="60px" style="-webkit-app-region:no-drag;"/></a>
			<a title1="切换到桌面" href="javascript:goToDeskTop(this)" class="nav_close" id="nav_desktop"  style="-webkit-app-region: drag;"><img id=""  src="../assets/images/nav_desktop.png" width="60px" style="-webkit-app-region:no-drag;"/></a>

			<a title1="切换到首页" href="javascript:goToFirst(this)" class="nav_close"  id="nav_first"  style="-webkit-app-region: drag;"><img id="" src="../assets/images/nav_first.png" width="60px" style="-webkit-app-region:no-drag;"/></a>

			<a title1="切换到设置主页1" href="javascript:goToPause(this)" class="nav_close" id="nav_pause"  style="-webkit-app-region: drag;"> <img id="nav_pause_img" src="../assets/images/nav_pause.png" width="60px"  style="-webkit-app-region:no-drag;"/></a>
			
			<a href="javascript:goToPrev(this)" class="nav_close" id="nav_prev"  style="-webkit-app-region: drag;"><img id="" src="../assets/images/nav_prev.png" width="60px"  style="-webkit-app-region:no-drag;"/></a>

			<a href="javascript:goToNext(this)" class="nav_close" id="nav_next"  style="-webkit-app-region: drag;"> <img id="" src="../assets/images/nav_next.png" width="60px"  style="-webkit-app-region:no-drag;"/></a>
			
			<a href="javascript:opNavWindow(this)" class="nav_close" id="nav_main" style="-webkit-app-region:no-drag;display: none;">				<img id="" src="../assets/images/nav_main.png" width="60px" style="-webkit-app-region:no-drag;"/></a>
		</div>
	</body>
	<script>
		var btnDict = {
			"drag":"<a  id=\"nav_drag\" ><img id=\"nav_drag_img\" src=\"../assets/images/nav_drag.png\"  width=\"60px\" /></a>",
			"setting":'<a href="javascript:goToSetting(this)" class="nav_close" id="nav_setting"  style="-webkit-app-region: drag;"><img id=""  src="../assets/images/nav_1.png" width="60px" style="-webkit-app-region:no-drag;"/></a>',
			"desktop":"<a href=\"javascript:goToDeskTop(this)\" class=\"nav_close\" id=\"nav_desktop\"  style=\"display: none;-webkit-app-region: drag;\"><img id=\"\"  src=\"../assets/images/nav_desktop.png\" width=\"60px\" style=\"-webkit-app-region:no-drag;\"/></a>",

			"first":"<a href=\"javascript:goToFirst(this)\" class=\"nav_close\"  id=\"nav_first\"  style=\"display: none;-webkit-app-region: drag;\"><img id=\"\" src=\"../assets/images/nav_first.png\" width=\"60px\" style=\"-webkit-app-region:no-drag;\"/></a>",

			"prev":"<a href=\"javascript:goToPrev(this)\" class=\"nav_close\" id=\"nav_prev\"  style=\"display: none;-webkit-app-region: drag;\"><img id=\"\" src=\"../assets/images/nav_prev.png\" width=\"60px\"  style=\"-webkit-app-region:no-drag;\"/></a>",

			"next":"<a href=\"javascript:goToNext(this)\" class=\"nav_close\" id=\"nav_next\"  style=\"display: none;-webkit-app-region: drag;\">				<img id=\"\" src=\"../assets/images/nav_next.png\" width=\"60px\"  style=\"-webkit-app-region:no-drag;\"/></a>",
			"pause":"<a href=\"javascript:goToPause(this)\" class=\"nav_close\" id=\"nav_pause\"  style=\"display: none;-webkit-app-region: drag;\">				<img id=\"nav_pause_img\" src=\"../assets/images/nav_pause.png\" width=\"60px\"  style=\"-webkit-app-region:no-drag;\"/></a>",

			"main":"<a href=\"javascript:opNavWindow(this)\" class=\"nav_close\" id=\"nav_main\" style=\"-webkit-app-region: drag;\">				<img id=\"\" src=\"../assets/images/nav_main.png\" width=\"60px\" style=\"-webkit-app-region:no-drag;\"/></a>"
		}
		try {
			var navBtn = appConfig.navbtns;
			var navBtns = [];
			if(undefined !=navBtn &&  null!=navBtn && ""!=navBtn){
				//console.log("======navBtn========================" ,navBtn);
				navBtns = navBtn.split(",");
			}

			var btnHtml = "";
			
			for (let i = 0; i < navBtns.length; i++) {
				const btn = navBtns[i];
				btnHtml += btnDict[btn];
			}
			
			// document.getElementById("op_btn").innerHTML = btnHtml;
			// for (let i = 0; i < navBtns.length; i++) {
			// 	const btn = navBtns[i];
			// 	document.getElementById("nav_" + btn).style.display = "";
			// 	//-webkit-app-region: drag;
			// }
		} catch (error) {
			
		}
	</script>

</html>
